<template>
<div class="ReadComment" >

    <el-icon style="font-size: 30px;margin-top: 100px;margin-left: 47px;"><Back /></el-icon>
    <div class="back" @click="comeNewsHome()">返回新闻列表</div>
    
    <div class="operationAbout">
          <!-- <div class="waitLook"><el-icon style="font-size: 30px;"><Reading /></el-icon>稍后再看</div> -->
          <div class="comment" @click="showComment()"><el-icon style="font-size: 30px;"><ChatSquare /></el-icon>评论</div>
          <!-- <div class="Line20"
             style="width: 211px; height: 0px; left: 150px; top: -4px; position: absolute; transform: rotate(90deg); transform-origin: 0 0; border: 3px #14B86E solid">
          </div> -->
     </div>

     
     <div class="saveComment" v-show="showBox">
          <el-icon style="font-size:30px;color:#119C59;padding:10px 265px;" @click="closeComment()"><CircleCloseFilled /></el-icon>
          <div class="saveComment-my">我的评论</div>
          <span class="saveComment-tips">文明上网，不传谣言！</span>
          <textarea class="saveComment-Textarea" placeholder="请输入评论"></textarea>
          <div class="saveComment-pub">
               <div style="color:#FAF9F7;font-size: 18px;margin-left:36px;padding-top: 14px;">
                    发布
                    <el-icon style="font-size:28px;color:#FAF9F7;margin-left:70%;vertical-align: middle;"><Memo /></el-icon>
               </div>
               
          </div>
     </div>

     <div class="details">
          <div class="details-time">1/6 2023 4分钟前</div>
          <div class="details-title">共同推动全球航运业可持续发展（国际论坛）人民日报 林基泽</div>
          <p class="details-content">第三届“一带一路”国际合作高峰论坛再次为促进各方之间的沟通与合作提供宝贵机会，有助于各方制定具体行动计划，加强基础设施建设，促进互联互通。 航运业承担了超过80%的全球贸易运输任务，对全球贸易和经济增长至关重要。作为全球航运的监管机构，国际海事组织在支持可持续海上运输方面发挥了关键作用，在推动实现联合国可持续发展目标方面扮演着重要角色。国际海事组织致力于支持发展可持续的蓝色经济，通过加强海洋治理，增进所有海事利益相关方之间的合作与协作。
               （作者为国际海事组织秘书长）        航运业对世界至关重要，必须走在变革前沿，努力实现更可持续、更环保的海上未来。海上运输仍然是大批量货物最经济、环保、可持续的运输方式。展望未来，航运业必须拥抱脱碳、数字化和自动化，同时确保在技术转型中将人的因素置于核心位置。国际海事组织通过了大量国际条约以加强国际监管体系，督促各方落实相关措施，通过能力建设支持各国发展。
               海运行业去碳化影响深远，涉及燃料供应和使用、海员培训、安全措施以及港口运营等各个方面。国际海事组织今年7月通过的“2023年船舶温室气体减排战略”得益于成员和行业代表们的通力协作。当然，实现净零排放目标需要按照既定的时间表有效实施综合措施，并提供技术支持，确保没有人掉队。
               中国是国际海事组织理事会成员，通过广泛参与国际海事组织会议、提交提案，以及以各种方式发挥自身在海事领域的技术专长，为国际海事组织的工作作出了重要贡献。我对中国在同国际海事组织开展技术合作方面的承诺和贡献表示赞赏，特别是在培训和能力建设领域。中国在上海海事大学设立了上海国际海事亚洲技术合作中心，在促进船舶能效技术应用、减少船舶有害排放方面发挥了重要作用。上海海事大学和大连海事大学分别与国际海事组织的世界海事大学合办硕士学位项目，在开发和传播相关专业知识方面贡献力量。中国在促进海上合作方面具有关键影响力，有力推动航运业走向更环保的未来。
               海事事业是全球性的。中国政府积极参与推动减少国际航运温室气体排放，我们对中国政府的相关贡献表示感谢。
          </p>
     </div>

     <div class="commentList">
        <el-scrollbar style="width:100%;">
            <div class="commentList-item">
               <div><img src="@/assets/test.jpg" alt="" style="width:40px;height:40px;border-radius: 40px;"></div>
               <div class="commentList-user">用户 姓名</div>
               <el-icon style="font-size:28px;color:#52575C;position:absolute;right:0;top:0;"><EditPen /></el-icon>
               <div class="commentList-time">11/6,2023 9:14 AM</div>
               <div class="commentList-content">非常好新闻，爱来自中国广阔的西部。</div>
            </div>  
        </el-scrollbar>
     </div>

     <div class="Group993" style="width: 212px; height: 32px; left: 53px; top: 41px; position: absolute">
      <div class="Newsletter"
           style="left: 0px; top: 2px; position: absolute; text-align: center; color: #119C59; font-size: 25px; font-family: Montserrat; font-weight: 700; text-transform: uppercase; letter-spacing: 0.20px; word-wrap: break-word">
        Newsletter</div>
      <div class="App"
           style="left: 183px; top: 0px; position: absolute; text-align: center; color: #333333; font-size: 14px; font-family: Montserrat; font-weight: 700; letter-spacing: 0.20px; word-wrap: break-word">
        App</div>
    </div>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()

const comeNewsHome = async() => {
     router.push({path: '/home'})
}

const showBox = ref(false);
const showComment = async() => {
     showBox.value = true;
};
const closeComment = async() => {
     showBox.value = false;
};
</script>

<style scoped>
.ReadComment {
     width: 100%;
     height: 100%;
     display: flex;
     background: #FAF9F7;
}

.back {
     margin-top: 105px;
     color: #25282B; 
     font-size: 16px; 
     font-weight: 500;

}

.operationAbout {
     /* border: 1px #000 solid; */
     width: 186px;
     height: 30%;
     margin-top: 13%;
     margin-left: 47px;
     position: absolute;

}
.waitLook {
     display: flex;
     width: 129px;
     height: 24px;
     padding-right: 0px;
     align-items: center;
     gap: 8px;
     margin-top: 50px;
}

.comment {
     display: flex;
     width: 129px;
     height: 24px;
     padding-right: 0px;
     align-items: center;
     gap: 8px;
     margin-top: -40px;
     margin-left: 5px;
}
.details {
     /* border: 1px #000 solid; */
     width: 572px;
     margin-top: 13%;
     margin-left: 15%;
}
.details-time {
     width: 304px; 
     height: 18px; 
     color: #119C59;
     font-size: 16px; 
     font-weight: 500; 
     line-height: 16px;
     letter-spacing: 0.20px;
}

.details-title {
     height: 94px;
     margin-top: 25px;
     color: #52575C;
     font-size: 26px;
     font-style: normal;
     font-weight: 500;
     word-break: keep-all;
}

.details-content {
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
     line-height: 24px; /* 133.333% */
     letter-spacing: 0.2px;
     color: #52575C;
     text-indent: 2em;
}
   
.saveComment {
     /* border: 1px #000 solid; */
     width: 308px;
     height: 428px;
     margin-left: 47px;
     margin-top: 16%;
     position: absolute;
     border-radius: 10px;
     box-shadow: 3px 3px 3px 3px rgb(197, 196, 196);
     background:  #f2f2f5;

}

.saveComment-my {
     width: 153px;
     font-size: 18px;
     margin-left: 78px;
     margin-bottom: 36px;
     text-align: center;
     color: #25282B;
}
.saveComment-tips {
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
     padding-left: 20px;
     color: #52575C;
}
.saveComment-Textarea {
     width: 293px;
     height: 140px;
     margin-left: 6px;
     margin-bottom: 72px;
     font-size: 16px;
     font-weight: 500;
     border-radius: 8px;
     border: 2px solid #119C59;
}
.saveComment-pub {
     width:100%;
     height: 58px;
     margin-top:17px;
     background:#119C59;
     border-radius: 0px 0px 8px 8px;
    
}
.commentList {
     border: 2px #000 solid;
     margin-top:16%;
     width: 400px;
     margin-left: 80px;
     display: flex;

}
.commentList-item {
     border: 1px #000 solid;
     width: 100%;
     height: 108px;
     color: #52575C;
     border-radius: 5px;
     
}
.commentList-user {
     width: 124px;
     height: 24px;
     margin: -43px 0 0 48px;
}
.commentList-time {
     width: 173px;
     font-size: 12px;
     line-height: 16px;
     color:#52575C;  
     margin: 3px 0 0 48px;
}
.commentList-content {
     font-size: 12px;
     font-weight: 400;
     line-height: 16px;
     color:  #25282B;
     margin: 12px 0 0 48px;

}
</style>
